<template>
  <div class="empty-container">
    <van-empty
      :image="image"
      :image-size="imageSize"
      :description="description"
    >
      <template #image v-if="$slots.image">
        <slot name="image"></slot>
      </template>
      <template #description v-if="$slots.description">
        <slot name="description"></slot>
      </template>
      <slot></slot>
    </van-empty>
  </div>
</template>

<script setup lang="ts">
interface Props {
  image?: string
  imageSize?: string | number
  description?: string
}

withDefaults(defineProps<Props>(), {
  image: 'default',
  imageSize: 160,
  description: '暂无数据'
})
</script>

<style scoped>
.empty-container {
  padding: 40px 20px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>